<template>
  <div class="nav" v-if="user === 'user-zhuanjia'">
    <div class="user-info">
      <div class="info-img">
        <img v-if="avatar != ''" :src="avatar != '' ? avatar : ''" alt="" />
        <span v-else>{{ username.slice(0, 1) }}</span>
      </div>
      <div class="info-text">
        <p>
          {{ username }}
          <router-link to="/modify"
            ><i class="iconfont icon-bianjixiugai"></i
          ></router-link>
        </p>
        <span>专家用户中心</span>
      </div>
    </div>
    <div class="reviewBtn">
      <!-- <router-link to="/experts-xiangmulist"
        ><img
          src="@/assets/images/发布项目.png"
          alt=""
        />项目管理列表</router-link
      > -->
    </div>
    <el-col :span="24">
      <el-menu
        default-active="/home"
        class="el-menu-vertical-demo"
        :router="true"
      >
        <el-menu-item index="/tongzhi">
          <div>
            <img src="@/assets/images/通知.png" alt="" />
            <span>通知</span>
          </div>
        </el-menu-item>
        <el-menu-item index="/experts-pingfen">
          <div>
            <i class="iconfont icon-daipingshen"></i>
            <p>待评审项目</p>
          </div>
        </el-menu-item>
        <el-menu-item index="/experts-list">
          <div>
            <i class="iconfont icon-shenhe1"></i>
            <p>项目评审</p>
          </div>
        </el-menu-item>
        <el-menu-item index="/experts-biaoji">
          <div>
            <i class="iconfont icon-icon_huabanfuben"></i>
            <p>标记项目</p>
          </div>
        </el-menu-item>
        <el-menu-item index="/experts-xiangmu" v-if="leader === 1">
          <div>
            <i class="iconfont icon-xiangmuzujian"></i>
            <p>项目组</p>
          </div>
        </el-menu-item>
        <el-submenu index="/list">
          <template slot="title">
            <i class="iconfont icon-liebiao"></i>
            <span>文章列表</span>
          </template>
          <el-menu-item index="/list-zhengce"
            >政策文件<i class="iconfont icon-gengduo"></i
          ></el-menu-item>
          <el-menu-item index="/list-gonggao"
            >公告公示<i class="iconfont icon-gengduo"></i
          ></el-menu-item>
          <el-menu-item index="/policylist"
            >政策公告<i class="iconfont icon-gengduo"></i
          ></el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </div>
  <div class="nav" v-else-if="user === 'user-shenbao'">
    <div class="user-info">
      <div class="info-img">
        <img v-if="avatar != ''" :src="avatar" alt="" />
        <span v-else>{{ username.slice(0, 1) }}</span>
      </div>
      <div class="info-text">
        <p>
          {{ username
          }}<router-link to="/modify"
            ><i class="iconfont icon-bianjixiugai"></i
          ></router-link>
        </p>
        <span>项目申报用户</span>
      </div>
    </div>
    <div class="reviewBtn">
      <router-link to="/declare-xiangmu"
        ><img
          src="@/assets/images/shenbao.png"
          alt=""
        />申报管理列表</router-link
      >
    </div>
    <el-col :span="24">
      <el-menu
        default-active="/shenbao-home"
        class="el-menu-vertical-demo"
        :router="true"
      >
        <el-menu-item index="/tongzhi">
          <div>
            <img src="@/assets/images/通知.png" alt="" />
            <span>通知</span>
          </div>
        </el-menu-item>
        <el-menu-item index="/declare-list">
          <div>
            <i class="iconfont icon-shenhe1"></i>
            <p>项目申报中心</p>
          </div>
        </el-menu-item>
        <el-menu-item index="/declare-biaoji">
          <div>
            <i class="iconfont icon-icon_huabanfuben"></i>
            <p>标记项目</p>
          </div>
        </el-menu-item>
        <el-submenu index="/list">
          <template slot="title">
            <i class="iconfont icon-liebiao"></i>
            <span>文章列表</span>
          </template>
          <el-menu-item index="/list-zhengce"
            >政策文件<i class="iconfont icon-gengduo"></i
          ></el-menu-item>
          <el-menu-item index="/list-gonggao"
            >公告公示<i class="iconfont icon-gengduo"></i
          ></el-menu-item>
          <el-menu-item index="/policylist"
            >政策公告<i class="iconfont icon-gengduo"></i
          ></el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </div>
  <div class="nav" v-else>
    <div class="user-info">
      <div class="info-img">
        <img v-if="avatar != ''" :src="avatar" alt="" />
        <span v-else>{{ username.slice(0, 1) }}</span>
      </div>
      <div class="info-text">
        <p>
          {{ username
          }}<router-link to="/modify"
            ><i class="iconfont icon-bianjixiugai"></i
          ></router-link>
        </p>
        <span>学校管理员</span>
      </div>
    </div>
    <div class="reviewBtn">
      <router-link to="/school-xiangmu"
        ><img
          src="@/assets/images/shenbao.png"
          alt=""
        />申报管理列表</router-link
      >
    </div>
    <el-col :span="24">
      <el-menu
        default-active="/school-home"
        class="el-menu-vertical-demo"
        :router="true"
      >
        <el-menu-item index="/tongzhi">
          <div>
            <img src="@/assets/images/通知.png" alt="" />
            <span>通知</span>
          </div>
        </el-menu-item>
        <el-menu-item index="/school-list">
          <div>
            <i class="iconfont icon-shenhe1"></i>
            <p>申报项目管理</p>
          </div>
        </el-menu-item>
        <el-menu-item index="/school-biaoji">
          <div>
            <i class="iconfont icon-icon_huabanfuben"></i>
            <p>标记项目</p>
          </div>
        </el-menu-item>
        <el-menu-item index="/user-management">
          <div>
            <i class="iconfont icon-yonghuguanli"></i>
            <p>申报用户管理</p>
          </div>
        </el-menu-item>
        <el-menu-item index="/info-maintenance">
          <div>
            <i class="iconfont icon-xuexiaoxinxi"></i>
            <p>学校信息维护</p>
          </div>
        </el-menu-item>
        <el-submenu index="/list">
          <template slot="title">
            <i class="iconfont icon-liebiao"></i>
            <span>文章列表</span>
          </template>
          <el-menu-item index="/list-zhengce"
            >政策文件<i class="iconfont icon-gengduo"></i
          ></el-menu-item>
          <el-menu-item index="/list-gonggao"
            >公告公示<i class="iconfont icon-gengduo"></i
          ></el-menu-item>
          <el-menu-item index="/policylist"
            >政策公告<i class="iconfont icon-gengduo"></i
          ></el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </div>
</template>
<script>
import { UserInfo } from "@/api/login";
// import { mutations } from "@/store"
export default {
  name: "Nav",
  data() {
    return {
      showNav: true,
      avatar: "",
      username: "",
      token: "",
      imgUrl: "",
      leader: "",
    };
  },
  props: {
    user: String,
  },
  methods: {
    secondaryMenu() {
      this.showNav = !this.showNav;
    },
    modifyInfo() {
      this.$router.push({
        path: "/modify",
      });
    },
    queryUserInfo() {
      UserInfo({
        token: this.token,
      }).then((result) => {
        const { data } = result;
        this.leader = data.leader;
        this.username = data.user_name;
        if (data.avatar != "") {
          if (data.avatar.indexOf("http") == -1) {
            this.avatar = this.imgUrl + data.avatar;
          }
        } else {
          this.avatar = data.avatar;
        }
      });
    },
  },
  created() {
    this.imgUrl = this.GLOBAL.imgUrl;
  },
  mounted() {
    const token = sessionStorage.getItem("token");
    this.token = token;
    this.queryUserInfo();
  },
};
</script>
<style lang='scss' scoped>
.nav {
  float: left;
  font-family: "PingFang";
  width: 285px;
  height: 100%;
  padding-top: 50px;
  background-color: #fff;
  .user-info {
    display: flex;
    align-items: center;
    padding: 0 37px;
    .info-img {
      width: 40px;
      height: 40px;
      line-height: 40px;
      color: #fff;
      font-family: "ZHSCNM";
      margin-right: 18px;
      border: solid 1px #4563ff;
      border-radius: 10px;
      background-color: #7793fc;
      box-shadow: 0px 4px 15.52px 0.48px rgba(73, 100, 245, 0.39);
      img {
        border-radius: 10px;
        width: 100%;
        height: 100%;
      }
      span {
        font-size: 25px;
      }
    }
    .info-text {
      width: calc(100% - 60px);
      text-align: left;
      font-size: 23px;
      p {
        display: flex;
      }
      span {
        line-height: 30px;
        font-size: 17px;
        color: #aeb2be;
      }
      i {
        font-size: 22px;
        color: #5775ff;
        margin-left: 10px;
      }
    }
  }
  .reviewBtn {
    width: 58%;
    margin: 35px auto 25px;
    text-align: center;
    a {
      display: flex;
      align-items: center;
      padding: 10px 8px 10px 25px;
      margin: 0 auto;
      background-color: #5673ff;
      border: solid 1px #2d4eff;
      box-shadow: 0px 4px 15.52px 0.48px rgba(73, 100, 245, 0.39);
      border-radius: 5px;
      font-size: 14px;
      color: #fff;
      img {
        width: 15px;
        height: 16px;
        margin-right: 10px;
      }
    }
  }
  .el-menu {
    text-align: left;
    border-right: none;
    .el-menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      color: #a1a4b5;
      img,
      i {
        margin: 0 20px;
      }
      img {
        width: 22px;
        height: 22px;
      }
      i {
        font-size: 25px;
      }
      div {
        display: flex;
        align-items: center;
      }
      /deep/.el-badge__content.is-dot {
        top: 13px;
      }
      /deep/.el-badge__content.is-fixed.is-dot {
        right: 0;
      }
      /deep/.el-badge {
        float: right;
      }
    }
    .el-submenu {
      .el-submenu__title {
        span {
          font-size: 18px;
          color: #a1a4b5;
        }
        i {
          font-size: 25px;
          margin: 0 20px;
        }
      }
      .el-menu-item {
        padding-left: 85px !important;
        padding-right: 10px;
        i {
          font-size: 16px;
        }
      }
      /deep/.el-icon-arrow-down:before {
        content: "" !important;
      }
    }
  }
  .el-menu-item.is-active,
  .el-submenu.is-active {
    color: #000;
    .el-submenu__title {
      span {
        color: #000;
      }
    }
  }
  .el-submenu.is-active {
    .el-menu-item.is-active {
      color: #5673ff;
    }
  }
}
</style>